﻿@using MudBlazor.Docs.Enums
<MudBadge Color="Color.Secondary" Dot="true" Overlap="true" Visible="_newNotificationsAvailable">
    <MudMenu Icon="@Icons.Material.Outlined.Notifications" Color="Color.Inherit" AnchorOrigin="Origin.BottomLeft" TransformOrigin="Origin.TopCenter" PopoverClass="docs-layout-menu-shadow" ListClass="pa-2 docs-menu-list" LockScroll="true">
        <div class="d-flex justify-space-between align-center px-2">
            <MudText Typo="Typo.subtitle2">Notifications</MudText>
            <MudButton Disabled="@(_newNotificationsAvailable == false)" OnClick="MarkNotificationAsRead" StartIcon="@Icons.Material.Filled.DoneAll" Variant="Variant.Text" Color="Color.Primary" Class="ml-16 mr-n2">Mark as read</MudButton>
        </div>
        @if (_messages != null && _newNotificationsAvailable)
        {
            @foreach (var (message, isRead) in _messages.Take(5))
            {
                <MudMenuItem Class="px-2 py-0 rounded" Link="@($"/mud/announcements/{message.Id}")">
                    <MudText Typo="Typo.subtitle2">@message.Title</MudText>
                    <MudText Typo="Typo.body2">@($"{message.Authors.FirstOrDefault()?.DisplayName} • {message.PublishDate.ToString("MM/dd/yyyy")}")</MudText>
                </MudMenuItem>
                <MudDivider Class="my-2"/>
            }
        }
        else
        {
            <div class="d-flex justify-center align-center px-2 py-8 relative">
                <MudText Class="mud-text-secondary my-12">Nothing new :(</MudText>
                <MudBlazorLogo Class="docs-logo-filter mx-16 absolute"/>
            </div>
        }
    </MudMenu>
</MudBadge>
<MudTooltip Duration="1000" Text="@(LayoutService.IsRTL ? "Switch to left-to-right" : "Switch to right-to-left")">
    <MudIconButton Icon="@(LayoutService.IsRTL ? @Icons.Material.Filled.FormatTextdirectionLToR : @Icons.Material.Filled.FormatTextdirectionRToL)" OnClick="@LayoutService.ToggleRightToLeft" Color="Color.Inherit"/>
</MudTooltip>
<MudTooltip Duration="1000" Text="@(LayoutService.DarkModeToggle == DarkLightMode.System ? "Switch to Light Theme" : LayoutService.DarkModeToggle == DarkLightMode.Dark ? "Switch to system" : "Switch to Dark Theme")">
    <MudIconButton Icon="@(LayoutService.DarkModeToggle == DarkLightMode.System ? @Icons.Material.Filled.AutoMode : LayoutService.DarkModeToggle == DarkLightMode.Dark ? @Icons.Material.Rounded.LightMode : @Icons.Material.Outlined.DarkMode)" Color="Color.Inherit" OnClick="@LayoutService.ToggleDarkMode"/>
</MudTooltip>